//引入react
import React, { Component } from 'react'
//引入action
import { increment, decrement, incrementAsync } from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

class Count extends Component {
  state = {countxxx:0}
  //加法
  increment = ()=>{
    const {value} = this.selectNumber
    this.props.increment(value*1)
  }
  //减法
  decrement = ()=>{
    const {value} = this.selectNumber
    this.props.decrement(value*1)
  }
  //奇数再加
  incrementIfOdd = ()=>{
    const {value} = this.selectNumber
    if(this.props.count % 2 !== 0){
      this.props.increment(value*1)
    }
  }
  //异步加
  incrementAsyn = ()=>{
    const {value} = this.selectNumber
    this.props.incrementAsync(value*1, 500)
  }
  render() {
    console.log('UI组件接受的参数是：', this.props)
    return (
      <div>
        <h2>我是Count组件</h2>
        <h4>当前求和为：{this.props.count}, 下方组件总人数为：{this.props.personCount}</h4>
        <select ref={c=>this.selectNumber=c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsyn}>异步加</button>&nbsp;
      </div>
    )
  }
}
//映射状态
const mapStateToProps = state => ({count:state.count,personCount:state.persons.length})
//映射操作状态的方法--mapDispatchToProps的简写
const mapDispatchToProps = {increment,decrement,incrementAsync}
//使用connect()()创建并暴露一个容器组件
export default connect(mapStateToProps, mapDispatchToProps)(Count)
